<template>
  <div class="content">
  <div id="payRollCenter" class="pay_roll_center center_panel">
      <div class="d_panel_content">
        <el-row class="d_panel_top" v-if="yearPayCostObj">
          <el-col class="pay_roll_pie_chart_title" :span="3">
            <div class="name">Employees</div>
            <div class="year">{{yearPayCostObj.payYear}}</div>
          </el-col>
          <el-col :span="6" id="payRollPieChart" class="pay_roll_pie_chart"></el-col>
          <el-col :span="10" class="pay_roll_pie_chart_legend">
            <div class="legend_item" v-for="(item,key) in yearPayCostObj.payList">
              <span class="circle" :style="{ backgroundColor: payChartColor[key]}"></span><span class="money">${{item.value?parseFloat(item.value).toFixed(2):""}}</span><span class="percent">{{item.rate+'%'}}</span>
              <div class="name">{{item.name}}</div>
            </div>
          </el-col>
          <el-col :span="5" class="run_area">
            <div><el-Button v-touch-ripple class="run_btn"  @click="$router.push('/payRoll/payRollCenter/payScheduleSelect')" type="primary">Run payroll</el-Button></div>
            <!--<div class="run_text">Next Payroll  due Friday,11/30</div>-->
            <div><el-button  v-touch-ripple type="text" @click="$router.push('/payRoll/payRollCenter/payCheckList')">Paycheck List</el-button></div>
          </el-col>
        </el-row>

        <div class="table_content">
          <el-row class="table_operator">
            <el-col :span="10">
              <el-button v-touch-ripple @click="$router.push('/payRoll/payRollCenter/AddEmployee')" >+Add Employee</el-button>
            </el-col>
            <el-col :span="8" class="r">
              <el-input ></el-input>
            </el-col>
          </el-row>
        <el-table v-if="personList" ref="payTable"
                    :data="personList"
                    border
                    emptyText="No Data"
                    @selection-change=""
                    @sort-change=""
                    @row-dblclick="tableDbClick"
                    @selection-change = "">
            <!--<div slot="empty">
              <i class="iconfont" style="font-size: 30px;vertical-align:middle;margin-right: 4px">&#xe619;</i> no Data !
            </div>-->
            &lt;!&ndash;多选列&ndash;&gt;
            <el-table-column
              type="selection"
              width="60">
            </el-table-column>
            &lt;!&ndash;序列号&ndash;&gt;
            <el-table-column
              type="index"
              label="No."
              width="60">
            </el-table-column>
            <template v-for="(value,key) in personTableColumn" >
              <el-table-column :key="value.name"
                 :show-overflow-tooltip = 'true'
                 :prop="value.name"
                 :label="value.title"
                 height="auto"
                 :min-width="value.width?value.with:100"
                 :sortable = "value.isSortable ? 'custom':false"
                 inline-template>
                <div>
                  <span v-if="value.name=='name'">
                      {{row.firstName?row.firstName:""}}
                      {{row.mi?' '+row.mi:""}}
                      {{row.lastName?' '+row.lastName:""}}
                  </span>
                  <span v-else-if="value.name=='payRate'">
                      {{row.unit?row.unit:""}}
                      {{row[value.name]?''+row[value.name]:""}}
                      {{row.payRange?'/ '+row.payRange:""}}
                  </span>
                  <span v-else>
                    {{ row[value.name]}}
                  </span>
                </div>
              </el-table-column>
            </template>
          </el-table>
          <!--分页-->
        <div v-show="personList" style="text-align:right;margin-top:10px" v-if="personListPb&&personListPb.pageDataCount>1">
            <el-pagination
              @size-change="tableChangePageSize"
              @current-change="tableChangePage"
              :current-page='parseInt(personListPb.pageNo)'
              :page-sizes="[5, 10, 20, 30]"
              :page-size='parseInt(personListPb.pageSize)'
              layout="total, sizes, prev, pager, next, jumper"
              :total='parseInt(personListPb.pageDataCount)'>
            </el-pagination>
          </div>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
  import dPanel from '../../components/common/Panel.vue';

  export default {
    components:{
      dPanel
    },
    data:function(){
      return{
        payChartColor:['#3fa4eb','#00c9c6','#ffb900'],
        pieChart:null,
        personTableColumn:[
          {title:'NAME',name:'name'},
          {title:'SSN',name:'ssn'},
          {title:'PAY　RATE',name:'payRate'},
          {title:'PAY SCHEDULE',name:'payScheduleName'},
          {title:'PAY METHOD',name:'payMethod'},
          {title:'STATUS',name:'statusName',type:""},
        ],
        page:{
          "pageNo":"1",
          "pageSize":"5"
        }
      }
    },
    computed:{
      /**
       * 支出情况数据
       */
      yearPayCostObj(){
        return this.$store.getters.yearPayCostObj;
      },
      /**
       * 员工表格数据
       */
      personList(){
        return this.$store.getters.personList;
      },
      /**
       * 员工表格分页数据
       */
      personListPb(){
        return this.$store.getters.personListPb;
      }
    },
    watch:{
      yearPayCostObj:function(value){
        if(value){
          this.$nextTick(function () {
            this.initPieChart();
          });
        }
      }
    },
    created:function () {
      this.init()
    },
    activated:function () {
      //this.init()
    },
    mounted:function(){
      this.$nextTick(function () {
        //this.initPieChart();
      });
    },
    methods:{
      init:function () {
        this.getPersons();
        this.getYearPayCost();
      },
      getPersons(){
        this.$store.dispatch("getPersons",this.page);
      },
      getYearPayCost(){
        this.$store.dispatch("getYearPayCost");
      },
      /**
       * 初始化并创建饼图
       */
      initPieChart:function(){
        $("#payRollPieChart").html("");
        var t = this;
        var width = 200,
        height = 200,
        radius = Math.min(width, height) / 2 - 10;
        var color = t.payChartColor;
        var data = t.yearPayCostObj.payList;
        if(!(data&&data.length==3&&data[0].value&&data[1].value&&data[2].value)){
          data = [ {name: 'empty', value: 1},]
          color = ['#ebebeb'];
        }

        var arc = d3.svg.arc()
          .outerRadius(radius - 10)
          .innerRadius(radius-40);
        var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) {
            return d.value;
          });

        var svg = d3.select("#payRollPieChart").append("svg")
            .datum(pie(data))
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        svg.append('text').text("TOTAL").attr("dy", "-.55em").attr("text-anchor","middle").style({'fill': '#3fa4eb'});
        svg.append('text').text("$"+t.yearPayCostObj.payTotal).attr("dy", "1em").attr("text-anchor","middle").style({'stroke': '#444'});

        var arcs = svg.selectAll("g.arc").data(pie).enter().append("g").attr("class", "arc");

        arcs.append("path")
            .attr("fill", function(d, i) {return color[i];}).transition().ease("bounce").duration(1000).attrTween("d", tweenPie)
            .transition().ease("elastic").delay(function(d, i) { return 2000 + i * 50; }).duration(550).attrTween("d", tweenDonut);

       // arcs.append("text")
          //  .attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")";}).attr("dy", ".35em").attr("dx", "-.5em").style({'fill': '#fff'})
        //    .text(function(d) { return d.data.data.name; });

        function tweenPie(b) {
          b.innerRadius = 0;
          var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
          return function(t) { return arc(i(t)); };
        }

        function tweenDonut(b) {
          b.innerRadius = radius * .6;
          var i = d3.interpolate({innerRadius: 0}, b);
          return function(t) { return arc(i(t)); };
        }
      },
      /**
       * 双击表格事件
       */
      tableDbClick(row, event){
        this.$refs.payTable.toggleRowSelection(row,true);
        this.$router.push('/payRoll/payRollCenter/employeeInfo/'+row.personId)
      },
      tableChangePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.getPersons();
      },
      tableChangePage(pageNo){
        this.page.pageNo = pageNo;
        this.getPersons();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  .pay_roll_center{
    .d_panel_content{
      .d_panel_top{
        padding: 10px 60px;
        .pay_roll_pie_chart_title{
          .name{
            line-height: 40px;
            color: #333;
            font-weight: bold;
            font-size: 18px;
          }
          .year{
            line-height: 30px;
            font-size: 16px;
            color: $activeColor;
          }
        }
        .pay_roll_pie_chart{

        }
        .pay_roll_pie_chart_legend{
          padding: 14px 20px;
          .legend_item{
            margin-bottom: 12px;
            .circle{
              display: inline-block;
              width: 18px;
              height: 18px;
              background-color: $activeColor ;
              border-radius: 50%;
              position: relative;
              vertical-align: middle;
              &:before{
                content: "";
                position: absolute;
                left: 5px;
                top: 5px;
                bottom: 5px;
                right: 5px;
                background-color: #fff;
                border-radius: 50%;
              }
            }
            .money{
              margin-left: 10px;
              font-size: 18px;
              color: #333;
              font-weight: bold;
            }
            .percent{
              margin-left: 20px;
              font-size: 14px;
              color: #666;
            }
            .name{
              line-height: 20px;
              padding-left: 30px;
              font-size: 12px;
              color: $activeColor;
            }
          }
        }
        .run_area{
          padding-top: 20px;
          line-height: 36px;
          text-align: right;
          .run_btn{
            padding: 0 30px;
          }
          .run_text{
            font-size: 12px;
            color: #666;
          }
        }
      }

      /*table ================start*/
      .table_content{
        padding: 0 20px;
        margin-bottom: 20px;
        .table_operator{
          margin-bottom: 10px;
        }

      }

      /*table ================end*/
    }

    .setting_page{
      position: absolute;
      top:0;
      right:0;
      left:0;
      border: 0;
      min-height: 100%;
      background-color: #fff;
      z-index: 1000;
      transition: all .3s;
      overflow: hidden;
      .title{
        line-height: 40px;
        background-color: #ddd;
        padding: 0 12px;
        .close_icon{
          float: right;;
          cursor: pointer;
        }
      }
      .content{
        padding: 40px;
        .select_title{
          color: #333;
          line-height: 80px;
          font-size: 20px;
        }
        .select_items{
          line-height: 50px;
          padding: 20px ;
        }
        .btn_group{
          margin-top: 60px;
          padding-left: 20px;
        }
      }
    }
  }
</style>
